import { Column, ColumnConfig } from '@ant-design/plots';
import { Tprops } from './types';
import WarpDiv from './warp';
import { echartStyle, titleStyle } from './config';

const ACColu = (props:Tprops) => {
  const config:ColumnConfig = {
    data: props.data,
    xField: 'labelName',
    yField: 'value',
    // colorField: 'name',
    // group: true,
    title: {
        title: props.title,
        ...titleStyle
      },
    style: {
      ...echartStyle
    },
    onReady: ({ chart }) => {
      try {
        chart.on('afterrender', () => {
          chart.emit('legend:filter', {
            data: { channel: 'color', values: ['London'] },
          });
        });
      } catch (e) {
        console.error(e);
      }
    },
    tooltip:{
      title:(v:any)=>(`${v.labelName}`),
      items: [{ channel: 'y' ,name:'销售',valueFormatter:(v)=>v}],
  },
  };
  return <WarpDiv><Column {...config} /></WarpDiv>;
};

export default ACColu;